<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >AI问答管理系统 - 角色管理</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#165DFF',
        secondary: '#36D399',
        warning: '#FFAB00',
        danger: '#F87272',
        dark: '#1E293B',
        'gray-100': '#F3F4F6',
        'gray-200': '#E5E7EB',
        'gray-300': '#D1D5DB',
        'gray-400': '#9CA3AF',
        'gray-500': '#6B7280',
        'gray-600': '#4B5563',
        'gray-700': '#374151',
        'gray-800': '#1F2937',
        'gray-900': '#111827'
      },
      fontFamily: {
        inter: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90;
            }
            .btn-gray {
                @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
            }
            .table-header {
                @apply bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
            }
            .table-row {
                @apply border-b border-gray-200 hover:bg-gray-50 transition-colors duration-150;
            }
            .badge {
                @apply px-2 py-1 text-xs font-medium rounded-full;
            }
        }
    </style>
    </head>
<body class='font-inter bg-gray-100 text-gray-800 min-h-screen flex flex-col'>
        <div class='flex flex-1 overflow-hidden'>
        <!-- 侧边导航栏 -->
<aside class='w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block fixed h-full z-20'>
        <div class='p-5 border-b border-gray-200'>
        <div class='flex items-center gap-3'>
        <div class='w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white' style='background-color:#4a90e2ff;'>
        <i class='fas fa-robot text-xl'>
        </i>
    </div>
<div >
        <h1 class='text-xl font-bold text-gray-900' data-yteditvalue='AI问答管理系统'>
        AI问答管理系统
    </h1>
    </div>
    </div>
    </div>
<nav class='p-4'>
        <div class='space-y-1' data-ytextravalue='extra-3h7d5bn0f'>
        <p class='text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3' data-ytindex='0' data-ytoriginindex='0'>
        主导航
    </p>
<a class='sidebar-item' data-ytindex='1' data-ytoriginindex='1' href='javascript:void(0);'>
        <i class='fas fa-tachometer-alt w-5 text-center'>
        </i>
<span >
        仪表盘
    </span>
    </a>
<a class='sidebar-item' data-ytindex='2' data-ytoriginindex='3' data-ytparentvalue='extra-3h7d5bn0f' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-file-alt w-5 text-center' style>
        </i>
<span style>
        文档管理
    </span>
    </a>
<a class='sidebar-item' data-ytindex='3' data-ytoriginindex='4' data-ytparentvalue='extra-3h7d5bn0f' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-history w-5 text-center'>
        </i>
<span >
        历史对话
    </span>
    </a>
<a class='sidebar-item active' data-ytindex='5' data-ytoriginindex='5' data-ytparentvalue='extra-3h7d5bn0f' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-users w-5 text-center'>
        </i>
<span >
        用户管理
    </span>
    </a>
<a class='sidebar-item' data-ytindex='6' data-ytoriginindex='6' href='javascript:void(0);'>
        <i class='fas fa-lock w-5 text-center'>
        </i>
<span >
        权限管理
    </span>
    </a>
    </div>
<div class='mt-8 space-y-1'>
        <p class='text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3'>
        系统
    </p>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-cog w-5 text-center'>
        </i>
<span >
        系统设置
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-question-circle w-5 text-center'>
        </i>
<span >
        帮助中心
    </span>
    </a>
    </div>
<div class='mt-8 p-4 bg-primary/5 rounded-xl'>
        <h3 class='text-sm font-medium text-primary mb-2'>
        AI能力配置
    </h3>
<p class='text-xs text-gray-600 mb-3'>
        调整AI模型参数和RAG配置以优化问答效果。
    </p>
<button class='btn btn-primary text-sm w-full justify-center'>
        <i class='fas fa-sliders-h'>
        </i>
配置模型
    </button>
    </div>
    </nav>
    </aside>
<!-- 主内容区域 -->
<div class='flex-1 flex flex-col overflow-hidden md:ml-64 pt-16'>
        <!-- 顶部导航栏 -->
<header class='h-16 bg-white shadow-sm flex items-center justify-between px-6 z-20 fixed w-full md:w-[calc(100%-256px)] md:left-64' data-selectorname='#id-wmkqw' data-ytextravalue='extra-348j4x8ln' style='top:0px'>
        <div class='flex items-center gap-6' data-ytindex='0' data-ytoriginindex='0' data-ytparentvalue='extra-348j4x8ln' style='left:1046px;position:relative'>
        <button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-bell text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center'>
        3
    </span>
    </button>
<button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-envelope text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center'>
        5
    </span>
    </button>
<div class='flex items-center gap-3 cursor-pointer group'>
        <img alt='用户头像' class='w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png'/>
<div class='hidden md:block'>
        <p class='font-medium'>
        管理员
    </p>
<p class='text-xs text-gray-500'>
        系统管理员
    </p>
    </div>
<i class='fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors'>
        </i>
    </div>
    </div>
    </header>
<!-- 页面内容 -->
<main class='flex-1 overflow-y-auto p-6 bg-gray-50'>
        <div class='max-w-7xl mx-auto'>
        <!-- 页面标题 -->
<div class='mb-6'>
        <h1 class='text-2xl font-bold text-gray-900' data-yteditvalue='用户管理'>
        用户管理
    </h1>
<p class='text-gray-500 mt-1' data-yteditvalue='管理系统中的用户角色，配置不同用户权限'>
        管理系统中的用户角色，配置不同用户权限
    </p>
    </div>
<!-- 操作按钮区 -->
<div class='flex flex-wrap items-center justify-between gap-4 mb-6'>
        <div class='flex flex-wrap gap-3'>
        <button class='btn btn-primary'>
        <i class='fas fa-plus'>
        </i>
新建角色
    </button>
<button class='btn btn-secondary'>
        <i class='fas fa-upload'>
        </i>
批量导入
    </button>
<button class='btn btn-gray'>
        <i class='fas fa-sync-alt'>
        </i>
刷新数据
    </button>
<button class='btn btn-gray'>
        <i class='fas fa-download'>
        </i>
导出报表
    </button>
    </div>
<div class='flex items-center gap-3'>
        <div class='relative'>
        <select class='block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-lg'>
        <option >
        全部角色
    </option>
<option >
        活跃角色
    </option>
<option >
        禁用角色
    </option>
    </select>
<div class='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500'>
        <i class='fas fa-chevron-down text-xs'>
        </i>
    </div>
    </div>
<div class='relative'>
        <input class='block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' placeholder='搜索角色...' type='text'/>
<div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
        <i class='fas fa-search text-gray-400'>
        </i>
    </div>
    </div>
    </div>
    </div>
<!-- 角色统计卡片 -->
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6'>
        <div class='card p-6'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        用户角色总数
    </p>
<h3 class='text-2xl font-bold text-gray-900 mt-1'>
        5
    </h3>
<p class='text-xs text-green-500 mt-1 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
较上月增长8.2%
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary'>
        <i class='fas fa-user-circle text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-6'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        活跃用户角色
    </p>
<h3 class='text-2xl font-bold text-gray-900 mt-1'>
        4
    </h3>
<p class='text-xs text-green-500 mt-1 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
较上月增长5.3%
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-secondary'>
        <i class='fas fa-user-check text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-6'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        角色分配数
    </p>
<h3 class='text-2xl font-bold text-gray-900 mt-1'>
        126
    </h3>
<p class='text-xs text-green-500 mt-1 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
较上月增长12.5%
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-warning'>
        <i class='fas fa-clock-rotate-left text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-6'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        平均满意度
    </p>
<h3 class='text-2xl font-bold text-gray-900 mt-1'>
        4.8/5
    </h3>
<p class='text-xs text-red-500 mt-1 flex items-center'>
        <i class='fas fa-arrow-down mr-1'>
        </i>
较上月下降0.2
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600'>
        <i class='fas fa-star text-xl'>
        </i>
    </div>
    </div>
    </div>
    </div>
<!-- 角色列表表格 -->
<div class='card mb-6'>
        <div class='p-5 border-b border-gray-200'>
        <h2 class='text-lg font-semibold text-gray-900'>
        角色列表
    </h2>
    </div>
<div class='overflow-x-auto'>
        <table class='min-w-full divide-y divide-gray-200'>
        <thead class='table-header'>
        <tr >
        <th class='px-6 py-3' scope='col'>
        角色名称
    </th>
<th class='px-6 py-3' scope='col'>
        角色类型
    </th>
<th class='px-6 py-3' scope='col'>
        使用次数
    </th>
<th class='px-6 py-3' scope='col'>
        满意度
    </th>
<th class='px-6 py-3' scope='col'>
        状态
    </th>
<th class='px-6 py-3' scope='col'>
        创建时间
    </th>
<th class='px-6 py-3 text-right' scope='col'>
        操作
    </th>
    </tr>
    </thead>
<tbody class='bg-white divide-y divide-gray-200'>
        <tr class='table-row'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='超级管理员' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/3ee89007f1df9e8b7857a8b8d3e31a7a.png'/>
<div >
        <div class='font-medium text-gray-900'>
        超级管理员
    </div>
<div class='text-xs text-gray-500'>
        super_admin
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-700'>
        系统管理
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='text-sm text-gray-900'>
        系统全部权限
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='text-sm font-medium text-gray-900 mr-2'>
        系统级
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='badge bg-green-100 text-green-800'>
        活跃
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-01-10
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='复制'>
        <i class='fas fa-copy'>
        </i>
    </button>
<button class='text-gray-400 cursor-not-allowed' disabled title='禁止删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='内容管理员' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d86228462c854cf5c58d4c7f6c49ce10.png'/>
<div >
        <div class='font-medium text-gray-900'>
        内容管理员
    </div>
<div class='text-xs text-gray-500'>
        content_admin
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-700'>
        内容管理
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='text-sm text-gray-900'>
        管理文档和知识库
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='text-sm font-medium text-gray-900 mr-2'>
        内容管理权限
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='badge bg-green-100 text-green-800'>
        活跃
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-02-15
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='复制'>
        <i class='fas fa-copy'>
        </i>
    </button>
<button class='text-red-500 hover:text-red-700' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='普通用户' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d8b2239e25c477524f7fa45d66f27170.png'/>
<div >
        <div class='font-medium text-gray-900'>
        普通用户
    </div>
<div class='text-xs text-gray-500'>
        regular_user
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-700'>
        基础使用
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='text-sm text-gray-900'>
        基础使用权限
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='text-sm font-medium text-gray-900 mr-2'>
        基础功能访问
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='badge bg-green-100 text-green-800'>
        活跃
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-03-20
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='复制'>
        <i class='fas fa-copy'>
        </i>
    </button>
<button class='text-red-500 hover:text-red-700' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='测试用户' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/2f806d8f0f509481b28d9d86dca314f2.png'/>
<div >
        <div class='font-medium text-gray-900'>
        测试用户
    </div>
<div class='text-xs text-gray-500'>
        test_user
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-700'>
        功能测试
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='text-sm text-gray-900'>
        测试功能权限
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='text-sm font-medium text-gray-900 mr-2'>
        测试功能访问
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='badge bg-yellow-100 text-yellow-800'>
        测试中
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-04-10
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='复制'>
        <i class='fas fa-copy'>
        </i>
    </button>
<button class='text-red-500 hover:text-red-700' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='访客' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/494f1995eac4a1eb306a57ab481b2cfd.png'/>
<div >
        <div class='font-medium text-gray-900'>
        访客
    </div>
<div class='text-xs text-gray-500'>
        visitor
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-700'>
        有限访问
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='text-sm text-gray-900'>
        有限的访问权限
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='text-sm font-medium text-gray-900 mr-2'>
        受限访问权限
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='badge bg-gray-100 text-gray-800'>
        有限访问
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-04-05
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='编辑'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='复制'>
        <i class='fas fa-copy'>
        </i>
    </button>
<button class='text-red-500 hover:text-red-700' title='删除'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
<!-- 分页 -->
<div class='px-5 py-4 border-t border-gray-200 flex items-center justify-between'>
        <div class='flex-1 flex justify-between sm:hidden'>
        <button class='btn btn-gray'>
        上一页
    </button>
<button class='btn btn-gray ml-3'>
        下一页
    </button>
    </div>
<div class='hidden sm:flex-1 sm:flex sm:items-center sm:justify-between'>
        <div >
        <p class='text-sm text-gray-700'>
        显示第
<span class='font-medium'>
        1
    </span>
到
<span class='font-medium'>
        5
    </span>
条，共
<span class='font-medium'>
        24
    </span>
条结果
    </p>
    </div>
<div >
        <nav aria-label='Pagination' class='relative z-0 inline-flex rounded-md shadow-sm -space-x-px'>
        <button class='relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'>
        <span class='sr-only'>
        上一页
    </span>
<i class='fas fa-chevron-left text-xs'>
        </i>
    </button>
<button class='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white'>
        1
    </button>
<button class='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50'>
        2
    </button>
<button class='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50'>
        3
    </button>
<span class='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700'>
        ...
    </span>
<button class='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50'>
        5
    </button>
<button class='relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'>
        <span class='sr-only'>
        下一页
    </span>
<i class='fas fa-chevron-right text-xs'>
        </i>
    </button>
    </nav>
    </div>
    </div>
    </div>
    </div>
<!-- 角色分配统计图表 -->
<div class='grid grid-cols-1 lg:grid-cols-2 gap-6'>
        <div class='card'>
        <div class='p-5 border-b border-gray-200'>
        <h2 class='text-lg font-semibold text-gray-900'>
        角色分配分布
    </h2>
    </div>
<div class='p-5'>
        <div class='w-full h-80' id='role-distribution-chart'>
        </div>
    </div>
    </div>
<div class='card'>
        <div class='p-5 border-b border-gray-200'>
        <h2 class='text-lg font-semibold text-gray-900'>
        角色权限对比
    </h2>
    </div>
<div class='p-5'>
        <div class='w-full h-80' id='permission-comparison-chart'>
        </div>
    </div>
    </div>
    </div>
    </div>
    </main>
    </div>
    </div>
<!-- 移动端侧边栏 -->
<div class='fixed inset-0 bg-black bg-opacity-50 z-30 hidden' id='mobile-overlay'>
        </div>
<div class='fixed inset-y-0 left-0 w-64 bg-white z-40 transform -translate-x-full transition-transform duration-300 ease-in-out' id='mobile-sidebar'>
        <!-- 移动端侧边栏内容，与桌面端相同 -->
<div class='p-5 border-b border-gray-200 flex justify-between items-center'>
        <div class='flex items-center gap-3'>
        <div class='w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white'>
        <i class='fas fa-robot text-xl'>
        </i>
    </div>
<div >
        <h1 class='text-xl font-bold text-gray-900'>
        AI问答系统
    </h1>
<p class='text-xs text-gray-500'>
        智能管理平台
    </p>
    </div>
    </div>
<button class='text-gray-500 hover:text-gray-800' id='close-mobile-menu'>
        <i class='fas fa-times'>
        </i>
    </button>
    </div>
<nav class='p-4'>
        <!-- 移动端导航内容，与桌面端相同 -->
<div class='space-y-1'>
        <p class='text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3'>
        主导航
    </p>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-tachometer-alt w-5 text-center'>
        </i>
<span >
        仪表盘
    </span>
    </a>
<a class='sidebar-item active' href='javascript:void(0);'>
        <i class='fas fa-user-tie w-5 text-center'>
        </i>
<span >
        角色管理
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-file-alt w-5 text-center'>
        </i>
<span >
        文档管理
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-history w-5 text-center'>
        </i>
<span >
        历史对话
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-users w-5 text-center'>
        </i>
<span >
        用户管理
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-lock w-5 text-center'>
        </i>
<span >
        权限管理
    </span>
    </a>
    </div>
<div class='mt-8 space-y-1'>
        <p class='text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3'>
        系统
    </p>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-cog w-5 text-center'>
        </i>
<span >
        系统设置
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-question-circle w-5 text-center'>
        </i>
<span >
        帮助中心
    </span>
    </a>
    </div>
<div class='mt-8 p-4 bg-primary/5 rounded-xl'>
        <h3 class='text-sm font-medium text-primary mb-2'>
        AI能力配置
    </h3>
<p class='text-xs text-gray-600 mb-3'>
        调整AI模型参数和RAG配置以优化问答效果。
    </p>
<button class='btn btn-primary text-sm w-full justify-center'>
        <i class='fas fa-sliders-h'>
        </i>
配置模型
    </button>
    </div>
    </nav>
    </div>
<!-- JavaScript -->
<script >// 页面加载时初始化渲染
document.addEventListener('DOMContentLoaded', function () {
  initCharts();
  initMobileMenu();
});

// 初始化图表
function initCharts() {
  // 角色分配分布图表
  var distributionChart = echarts.init(document.getElementById('role-distribution-chart'));
  var distributionOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center'
    },
    series: [{
      name: '角色分配分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 3,
        name: '超级管理员',
        itemStyle: {
          color: '#165DFF'
        }
      }, {
        value: 12,
        name: '内容管理员',
        itemStyle: {
          color: '#36D399'
        }
      }, {
        value: 85,
        name: '普通用户',
        itemStyle: {
          color: '#FFAB00'
        }
      }, {
        value: 15,
        name: '测试用户',
        itemStyle: {
          color: '#722ED1'
        }
      }, {
        value: 11,
        name: '访客',
        itemStyle: {
          color: '#F87272'
        }
      }]
    }]
  };
  distributionChart.setOption(distributionOption);

  // 角色权限对比图表
  var permissionChart = echarts.init(document.getElementById('permission-comparison-chart'));
  var permissionOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['系统管理', '内容管理', '用户管理', '功能测试', '基础访问'],
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['超级管理员', '内容管理员', '普通用户', '测试用户', '访客']
    },
    yAxis: {
      type: 'value',
      max: 1,
      min: 0,
      interval: 1,
      axisLabel: {
        formatter: function formatter(value) {
          return value === 1 ? '有' : '无';
        }
      }
    },
    series: [{
      name: '系统管理',
      type: 'bar',
      data: [1, 0, 0, 0, 0],
      itemStyle: {
        color: '#165DFF'
      }
    }, {
      name: '内容管理',
      type: 'bar',
      data: [1, 1, 0, 0, 0],
      itemStyle: {
        color: '#36D399'
      }
    }, {
      name: '用户管理',
      type: 'bar',
      data: [1, 0, 0, 0, 0],
      itemStyle: {
        color: '#FFAB00'
      }
    }, {
      name: '功能测试',
      type: 'bar',
      data: [1, 0, 0, 1, 0],
      itemStyle: {
        color: '#722ED1'
      }
    }, {
      name: '基础访问',
      type: 'bar',
      data: [1, 1, 1, 1, 1],
      itemStyle: {
        color: '#F87272'
      }
    }]
  };
  permissionChart.setOption(permissionOption);

  // 响应窗口大小变化
  window.addEventListener('resize', function () {
    distributionChart.resize();
    permissionChart.resize();
  });
}

// 初始化移动端菜单
function initMobileMenu() {
  var mobileMenuButton = document.getElementById('mobile-menu-button');
  var closeMobileMenu = document.getElementById('close-mobile-menu');
  var mobileOverlay = document.getElementById('mobile-overlay');
  var mobileSidebar = document.getElementById('mobile-sidebar');
  mobileMenuButton.addEventListener('click', function () {
    mobileSidebar.classList.remove('-translate-x-full');
    mobileOverlay.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  });
  function closeMenu() {
    mobileSidebar.classList.add('-translate-x-full');
    mobileOverlay.classList.add('hidden');
    document.body.style.overflow = '';
  }
  closeMobileMenu.addEventListener('click', closeMenu);
  mobileOverlay.addEventListener('click', closeMenu);

  // 移动端导航项点击关闭菜单
  var mobileNavItems = mobileSidebar.querySelectorAll('.sidebar-item');
  mobileNavItems.forEach(function (item) {
    item.addEventListener('click', closeMenu);
  });
}</script>
    </body>
    </html>